<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgba(192, 192, 192, 0.8);
            position: absolute;
            top: 0;
            /* display: none; */
        }
        .imgbox{
            border: 1px solid #000;
            width: 300px;
            height: 300px;
            position:relative;
        }
        .imgbox img{
            width: 100%;
        }
        .bigimg{
            left: 50px;
            position: relative;
            width: 350px;
            height: 350px;
            /* background-color: saddlebrown; */
            border: 1px solid #000;
            overflow: hidden;
            display: none;
           
        }
        .bigimg img{
            width: 600px;
            position: absolute;
            top: 0;
            left: 100px;
        }
        .b{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="b">
        <div class="imgbox">
            <img src="./cw1.png" alt="">
            <div class="box">
            </div>
        </div>
        <div class="bigimg">
            <img src="./cw1.png" alt="" id='xxx'>
        </div>
    </div>
    

    <script>
        let box = document.querySelector('.box');
        let imgbox =document.querySelector('.imgbox');
        let bigimg =document.querySelector('.bigimg');
        let xxx =document.querySelector('#xxx');
       imgbox.addEventListener('mousemove',function(e){
           let x =e.clientX;
           let y =e.clientY;
            if(e.clientX >= imgbox.offsetWidth-box.offsetWidth + (box.offsetWidth/2)){
               x =imgbox.offsetWidth-box.offsetWidth + (box.offsetWidth/2);
            }else if(e.clientX <= box.offsetWidth/2){
               x =box.offsetWidth/2;
            }
            if(e.clientY >= imgbox.offsetHeight-box.offsetHeight + (box.offsetHeight/2)){
                y=imgbox.offsetHeight-box.offsetHeight + (box.offsetHeight/2)
            }else if(e.clientY <= box.offsetHeight/2){
               y =box.offsetHeight/2;
            }
            // console.log(e.clientX);
            box.style.display = 'block';
            bigimg.style.display= 'block';
            let bigx= x*300/(imgbox.offsetWidth-box.offsetWidth + (box.offsetWidth/2));
            let bigy= y*300/(imgbox.offsetWidth-box.offsetWidth + (box.offsetWidth/2));
            // box.style.transform = `translate(${e.clientX-(box.offsetWidth/2)}px ,${e.clientY-(box.offsetHeight/2)}px)`;
            box.style.transform = `translate(${x-(box.offsetWidth/2)}px ,${y-(box.offsetHeight/2)}px)`;
            xxx.style.transform =`translate(${-bigx}px,${-bigy}px)`;
           
        })
        imgbox.addEventListener('mouseout',function(e){
            bigimg.style.display= 'none';
            box.style.display = 'none';        
        })
        
    </script>
</body>
</html>